<template>
  <div>
    <el-dialog
      :title="editTitle"
      :visible.sync="scheduledFixedTasksVisible"
      width="30%"
      append-to-body
      :before-close="handleClose1"
    >
      <el-form ref="dialogForm" :model="formData">
        <el-form-item
          prop="flowName"
          label="流程名称："
          :rules="[
            { required: true, message: '请输入流程名称', trigger: 'blur' },
          ]"
        >
          <el-input v-model.trim="formData.flowName" clearable />
        </el-form-item>
        <el-form-item
          prop="flowEnName"
          label="流程英文名："
          :rules="[
            {
              required: true,
              pattern: /^[A-Z]{1}[A-Za-z]+$/g,
              message: '请输入流程英文名，必须是英文并且首字母大写',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model.trim="formData.flowEnName"
            :disabled="!!editDate"
            clearable
            placeholder="请输入流程英文名，必须是英文并且首字母大写"
          />
        </el-form-item>
        <el-form-item
          prop="moduleId"
          label="选择子项目"
          :rules="[
            {
              required: true,
              message: '选择子项目',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="formData.moduleId"
            placeholder="选择子项目"
            @change="handleChildChange"
          >
            <el-option
              v-for="item in moduleLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="packageName"
          label="功能模块"
          :rules="[
            {
              required: true,
              message: '请选择功能模块',
              trigger: 'change',
            },
          ]"
        >
          <!-- <myElAutocomplete
            :form="formData"
            attributeName="packageName"
            :seleteLists="packageLists"
            placeholder="请选择功能模块"
            :isInput="false"
          /> -->
          <el-select v-model="formData.packageName" placeholder="请选择模块">
            <el-option
              v-for="item in packageLists"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  voClassNameExist,
  listModulePackage,
  createScheduleFlow,
  projectManageprojectModellist,
} from "@/api/lowcode";
import myElAutocomplete from "../commonComponents/myElAutocomplete.vue";
export default {
  components: { myElAutocomplete },
  props: {
    scheduledFixedTasksVisible: {
      type: Boolean,
      default: false,
    },
    editDate: {
      type: Object,
      default: null,
    },
  },
  inject: ["moduleModetTreeList"],
  data() {
    return {
      editTitle: "新增定时任务流程",
      formData: {
        projectId: +sessionStorage.getItem("developLowCodeId"),
        flowName: "",
        flowEnName: "",
        moduleId: "",
        packageName: "",
      },
      packageLists: [],
    };
  },
  async created() {
    await this.projectManageprojectModellist();
    if (this.editDate) {
      console.log(this.editDate, 4563000);
      this.formData = this.editDate;
      this.editTitle = "定时任务流程编辑";
    } else {
      this.editTitle = "新增定时任务流程";
      this.formData.moduleId = this.moduleLists[0]?.id;
    }
    this.listModulePackage();
  },
  methods: {
    handleChildChange() {
      this.formData.packageName = "";
      this.listModulePackage();
    },
    async projectManageprojectModellist() {
      this.moduleLists = [];
      const res = await projectManageprojectModellist(
        +sessionStorage.getItem("developLowCodeId")
      );
      if (res?.code === 200) {
        this.moduleLists = res.data;
      }
    },
    async listModulePackage() {
      const res = await listModulePackage(
        +sessionStorage.getItem("developLowCodeId"),
        this.formData.moduleId
      );
      if (res?.code === 200) {
        this.packageLists = res.data;
        // this.packageLists = res.data.map((item) => ({ value: item }));
      }
    },
    handleClose1() {
      this.$emit("close");
    },
    async handleBlur(name, id) {
      const res = await voClassNameExist(name, id);
      if (res?.code === 200) {
        if (res.data) {
          this.$message({
            message: "流程英文名已存在，请从新输入",
            type: "warning",
            showClose: true,
          });
          this.formData.flowEnName = "";
          return true;
        }
      }
    },
    handleSave() {
      this.$refs["dialogForm"].validate(async (valid) => {
        if (valid) {
          if (!this.editDate) {
            const flag = await this.handleBlur(
              this.formData.flowEnName,
              +sessionStorage.getItem("developLowCodeId")
            );
            if (flag) return;
          }
          const form_Data = JSON.parse(JSON.stringify(this.formData));
          const res = await createScheduleFlow(form_Data);
          if (res?.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.handleClose1();
            if (!this.editDate) {
              this.$parent.currentComponent = "basicsssssComponents";
              await this.moduleModetTreeList();
              this.$parent.fengzhuangConent(res.data);
              this.$parent.treeGaoliangAndscroll(res.data);
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.temnClass {
  ::v-deep label {
    margin-top: 3px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 10px !important;
  }
  .flexClass {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
